<!-- @format -->

<template>
  <div class="page_rela_container" v-loading="loading" v-loadingCommonStyle>
    <div class="scroll_auto flex_cell">
      <ex_super_form ref="form" v-bind="baseModel" :data="form" label-position="right" label-width="140px"> </ex_super_form>
    </div>
    <div class="page_rela_bottom_area">
      <template v-if="edit">
        <el-button type="primary" @click="submit">{{ $t("label_submit") }}</el-button>
        <el-button @click="cancel">{{ $t("label_cancel") }}</el-button>
      </template>
      <template v-else>
        <el-button type="primary" @click="modify">{{ $t("label_modify") }}</el-button>
      </template>
    </div>
  </div>
</template>

<script>
import router_params from "@/mixin/router_params";
import country_select from "@/component/tms/country_select";

export default {
  title: "label_company_info",
  mixins: [router_params],

  components: { country_select },
  data() {
    return {
      loading: false,
      edit: false,
      form: {},
      org_form: {},
      baseModel: {
        formClass: "standard_form_gird standard_form_gird_right",
        model: [
          { header: "label_base_info" },
          {
            grid: [
              [
                {
                  key: "companyName",
                  label: "label_company_name",
                  render: (h, { data, item }) => {
                    const value = data[item.key];
                    if (this.edit) {
                      return <ex_super_input value={value} onInput={(e) => this.$set(data, item.key, e)} />;
                    }
                    return this.$renderText(h, value);
                  },
                },
                {
                  key: "companyCode",
                  label: "label_company_code",
                  render: (h, { data, item }) => this.$renderText(h, data[item.key]),
                },
                {
                  key: "companyShortName",
                  label: "label_company_short",
                  render: (h, { data, item }) => {
                    const value = data[item.key];
                    if (this.edit) {
                      return <ex_super_input value={value} onInput={(e) => this.$set(data, item.key, e)} />;
                    }
                    return this.$renderText(h, value);
                  },
                },
              ],
              [
                {
                  key: "companyCreditCode",
                  label: "label_unified_credit_code",
                  render: (h, { data, item }) => {
                    const value = data[item.key];
                    if (this.edit) {
                      return <ex_super_input value={value} onInput={(e) => this.$set(data, item.key, e)} />;
                    }
                    return this.$renderText(h, value);
                  },
                },
                {
                  key: "legalIdNo",
                  label: "label_corporate_ID_number",
                  render: (h, { data, item }) => {
                    const value = data[item.key];
                    if (this.edit) {
                      return <ex_super_input value={value} onInput={(e) => this.$set(data, item.key, e)} />;
                    }
                    return this.$renderText(h, value);
                  },
                },
              ],
              [
                {
                  key: "licenseFile",
                  label: "label_Business_License_Attachment",
                  render: (h, { data, item }) => {
                    const value = data[item.key];
                    if (!value && !this.edit) {
                      return this.$renderText(h, value);
                    }
                    return (
                      <ex_super_upload
                        type="image"
                        disabled={!this.edit}
                        value={value} imageBoxSize={100}
                        onlySingle onlyUrl
                        key="licenseFile"
                        accept=".jpg,.png,.jpeg"
                        onInput={(e) => this.$set(data, item.key, e)}
                      />
                    );
                  },
                },
                {
                  key: "legalIdNoFiles",
                  label: "label_Attachment_Corporate_Identity_Card",
                  render: (h, { data, item }) => {
                    const value = data[item.key];
                    if (!value && !this.edit) {
                      return this.$renderText(h, value);
                    }
                    return (
                      <ex_super_upload
                        type="image"
                        disabled={!this.edit}
                        value={value} imageBoxSize={100}
                        onlyUrl limit={2}
                        key="licenseFile"
                        accept=".jpg,.png,.jpeg"
                        onInput={(e) => this.$set(data, item.key, e)}
                      />
                    );
                  },
                },
              ],
              [
                {
                  key: "legalPerson",
                  label: "label_legal_person_name",
                  render: (h, { data, item }) => {
                    const value = data[item.key];
                    if (this.edit) {
                      return <ex_super_input value={value} onInput={(e) => this.$set(data, item.key, e)} />;
                    }
                    return this.$renderText(h, value);
                  },
                },

                {
                  key: "companyTel",
                  label: "label_company_landline",
                  render: (h, { data, item }) => {
                    const value = data[item.key];
                    if (this.edit) {
                      return <ex_super_input value={value} onInput={(e) => this.$set(data, item.key, e)} />;
                    }
                    return this.$renderText(h, value);
                  },
                },
              ],
              [
                {
                  key: "email",
                  label: "label_mailbox",
                  render: (h, { data, item }) => {
                    const value = data[item.key];
                    if (this.edit) {
                      return <ex_super_input value={value} onInput={(e) => this.$set(data, item.key, e)} />;
                    }
                    return this.$renderText(h, value);
                  },
                },
                {
                  key: "country",
                  label: "label_country",
                  render: (h, { data, item }) => {
                    const value = data[item.key];
                    if (this.edit) {
                      return h(country_select, {
                        class: "w_fill",
                        props: {
                          value,
                          optionValue: "countryName",
                          url: "/oms-api/client/OmsCountryClientRpc/selectAllLabel.json",
                        },
                        on: {
                          input: (e) => this.$set(data, item.key, e),
                        },
                      });
                    }
                    return this.$renderText(h, value);
                  },
                },
              ],
              [
                {
                  span: 2,
                  col: {
                    key: "registAddress",
                    label: "label_register_address",
                    span: 2,
                    render: (h, { data, item }) => {
                      const value = data[item.key];
                      if (this.edit) {
                        return <ex-address value={value} onInput={(e) => this.$set(data, item.key, e)}></ex-address>;
                      }
                      const text =
                        value && value.length == 3
                          ? _.takeRight(value, 2)
                              .filter((it) => it)
                              .join("/")
                          : "";
                      return this.$renderText(h, text);
                    },
                  },
                },
                {
                  span: 2,
                  col: {
                    key: "mailAddress",
                    label: "label_mail_address",
                    span: 2,
                    render: (h, { data, item }) => {
                      const value = data[item.key];
                      if (this.edit) {
                        return <ex-address value={value} onInput={(e) => this.$set(data, item.key, e)}></ex-address>;
                      }
                      const text =
                        value && value.length == 3
                          ? _.takeRight(value, 2)
                              .filter((it) => it)
                              .join("/")
                          : "";
                      return this.$renderText(h, text);
                    },
                  },
                },
              ],
            ],
          },

          { header: "label_contact_info" },
          {
            grid: [
              [
                {
                  key: "contactName",
                  label: "label_contact_name",
                  render: (h, { data, item }) => {
                    const value = data[item.key];
                    if (this.edit) {
                      return <ex_super_input value={value} onInput={(e) => this.$set(data, item.key, e)} />;
                    }
                    return this.$renderText(h, value);
                  },
                },
                {
                  key: "contactIdNo",
                  label: "label_contact_idcard_number",
                  render: (h, { data, item }) => {
                    const value = data[item.key];
                    if (this.edit) {
                      return <ex_super_input value={value} onInput={(e) => this.$set(data, item.key, e)} />;
                    }
                    return this.$renderText(h, value);
                  },
                },
              ],
              [
                {
                  key: "contactPhone",
                  label: "label_contact_phone",
                  render: (h, { data, item }) => {
                    const value = data[item.key];
                    if (this.edit) {
                      return <ex_super_input value={value} onInput={(e) => this.$set(data, item.key, e)} />;
                    }
                    return this.$renderText(h, value);
                  },
                },
                {
                  key: "contactPosition",
                  label: "label_contact_job",
                  render: (h, { data, item }) => {
                    const value = data[item.key];
                    if (this.edit) {
                      return <ex_super_input value={value} onInput={(e) => this.$set(data, item.key, e)} />;
                    }
                    return this.$renderText(h, value);
                  },
                },
              ],
            ],
          },
        ],
        rules: {
          companyName: [
            {
              required: true,
              message: this.$tt("tip_can_no_empty"),
              trigger: "blur",
            },
            {
              min: 1,
              max: 32,
              message: this.$tt("tip_length_in_min_max", { min: 1, max: 32 }),
              trigger: "blur",
            },
          ],
          companyCode: [
            {
              required: true,
              message: this.$tt("tip_can_no_empty"),
              trigger: "blur",
            },
            {
              min: 1,
              max: 16,
              message: this.$tt("tip_length_in_min_max", { min: 1, max: 16 }),
              trigger: "blur",
            },
          ],
        },
      },
    };
  },

  methods: {
    modify() {
      this.edit = true;
      this.org_form = _.cloneDeep(this.form);
    },
    cancel() {
      this.edit = false;
      this.form = this.org_form;
    },
    init_data_default(into_params) {
      this.form = {};
      this.edit = false;
      this.loading = true;
      this.$ajax({
        url: this.$url["ums/customerDetail"],
        method: "post",
        success: (res) => {
          this.form = res.data;
        },
        complete: () => {
          this.loading = false;
        },
      });
    },
    submit() {
      this.$refs["form"].validate((valid, obj) => {
        if (valid) {
          this.$ajax({
            url: this.$url["ums/customerSaveUpdate"],
            method: "post",
            type: "json",
            loading: true,
            data: this.form,
            success: (res) => {
              this.$message.success(this.$tt("tip_submit_success"));
              this.init_data_default();
            },
          });
        } else {
          this.$message.error(this.$tt("form_validate_error"));
          return false;
        }
      });
    },
    init_view() {
      let _this = this;

      _this.$ajax({
        url: "/ums-api/client/CustomerCompanyClientRpc/selectByCustomer.json",
        type: "json",
        success: (responseData) => {
          if (responseData.data) {
            _this.form = responseData.data;

            if (responseData.data.registAddress && responseData.data.registAddress.length > 0) {
              let registAddressLabel = "";

              responseData.data.registAddress.forEach((item, index) => {
                if (index > 0) {
                  registAddressLabel += item;
                }
              });
              var s1 = registAddressLabel.replace("/", "");

              _this.form.registAddressLabel = s1;
            }

            if (responseData.data.mailAddress && responseData.data.mailAddress.length > 0) {
              let mailAddressLabel = "";

              responseData.data.mailAddress.forEach((item, index) => {
                if (index > 0) {
                  mailAddressLabel += item;
                }
              });
              var s = mailAddressLabel.replace(/\//g, "");

              _this.form.mailAddressLabel = s;
            }
          }
        },
      });
    },
  },
};
</script>

<style scoped></style>
